<template>
  <div
    :class="[
      'carousel-text-warp',
      !auto ? 'carousel-text-warp-hover' : 'carousel-text-warp-auto',
    ]"
    :style="{ fontSize: `${fontSize}px` }"
    :data-content="content + keyWord"
  >
    <div class="carousel">
      <div :class="['carousel-name-info']">
        {{ content }}
      </div>
      <div
        :class="[isOverX ? 'carousel-move-show' : 'carousel-name-info-show']"
        :style="{ 'min-width': otherWidth && isOverX ? paramWidth + 'px' : '' }"
        @mouseenter="handleMouseOver"
        @mouseleave="handleMouseOut"
      >
        <span
          class="basic-name-item"
          v-if="isOverX"
          :style="moveIdx === index && isOverX ? nameMoveStyle : {}"
        >
          {{ content }}
        </span>
        <span
          class="basic-name-item"
          v-if="isOverX"
          :style="moveIdx === index && isOverX ? nameCopyMoveStyle : {}"
        >
          {{ content }}
        </span>
        <span class="basic-name-item" v-else>
          {{ content }}
        </span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "index",
  props: {
    content: {
      type: String,
      default: null,
    },
    index: {
      type: Number,
      default: null,
    },
    fontSize: {
      type: Number,
      default: () => 14,
    },
    keyWord: {
      type: [Number, String],
      default: null,
    }, //当出现同样字段，且外层宽度不一样时，传值进行区分
    auto: {
      type: Boolean,
      default: false,
    }, //自动播放
    isDefaulScroll: {
      type: Boolean,
      default: false,
    }, //是否默认滚动
    otherWidth: {
      type: Boolean,
      default: false,
    },
    paramWidth: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      moveIdx: -1,
      nameMoveStyle: {
        transform: "translateX(0px)",
        width: 0,
      },
      nameCopyMoveStyle: {
        transform: "translateX(0px)",
        width: 0,
      },
      timer: null,
      isOverX: false,
      width: 0,
    };
  },
  watch: {
    content: {
      handler: function (val) {
        if (this.auto) {
          this.setRoll();
        }
      },
    },
  },
  methods: {
    handleMouseOver() {
      if (!this.auto) {
        this.setRoll();
      }
    },
    setRoll() {
      this.$nextTick(() => {
        this.createDomBox();
        if (this.isOverX) {
          // 为span元素设置样式
          this.nameMoveStyle.width = this.width + "px";
          this.nameCopyMoveStyle.width = this.width + "px";
          this.nameCopyMoveStyle.transform = "translateX(" + this.width + "px)";
          let distance = 0; // 位移距离
          // 设置位移
          if (this.timer) {
            clearInterval(this.timer);
          }
          this.timer = setInterval(() => {
            distance = distance - 1;
            // 如果位移超过文字宽度，则回到起点
            if (-distance >= this.width) {
              distance = 0;
            }
            this.nameMoveStyle.transform = "translateX(" + distance + "px)";
            this.nameCopyMoveStyle.transform =
              "translateX(" + (distance + this.width) + "px)";
          }, 70);
        }
      });
    },
    handleMouseOut() {
      if (!this.auto) {
        this.moveIdx = this.index;
        this.nameMoveStyle = {
          transform: "translateX(0px)",
          width: 0,
        };
        this.nameCopyMoveStyle = {
          transform: "translateX(0px)",
          width: 0,
        };
        clearInterval(this.timer);
      }
    },
    /**
     * 创建dom元素，并且判断字体是否溢出
     */
    createDomBox(val) {
      let temp = document.getElementById("carousel-list-move-item-name");
      temp && temp.remove();
      //创建元素
      let div = document.createElement("span");
      div.setAttribute("id", "carousel-list-move-item-name");
      div.style.fontSize = `${this.fontSize}px`;
      if (document.getElementsByClassName("carousel-text-warp")) {
        if (document.getElementsByTagName("body")[0]) {
          document.getElementsByTagName("body")[0].appendChild(div);
        }
      }
      this.moveIdx = this.index;
      // 将选中的表名写入创建的元素中并计算宽度
      let dom = document.getElementById("carousel-list-move-item-name"),
        box = document.querySelectorAll(
          `[data-content="${this.content + this.keyWord}"]`
        )[0];
      // box = document.getElementsByClassName('carousel-text-warp')[0];
      dom.innerText = this.content;
      this.width = dom.offsetWidth + 10;
      let boxOffsetWidth =
        box.offsetWidth && box.offsetWidth !== "0" ? box.offsetWidth : 160;
      //判断是否溢出
      this.isOverX = dom.offsetWidth > boxOffsetWidth;
    },
  },
  mounted() {
    // this.createDomBox()
    if (this.auto) {
      this.setRoll();
    }
  },
  destroyed() {
    let temp = document.getElementById("carousel-list-move-item-name");
    temp && temp.remove();
  },
};
</script>

<style scoped lang="scss">
.carousel-text-warp {
  display: block;
  width: 100%;
  height: 20px;
  line-height: 20px;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;

  .carousel {
    i {
      color: #7b7c89 !important;
    }

    /*&:hover {*/
    /*  */
    /*  .carousel-name-info {*/
    /*    display: none;*/
    /*  }*/

    /*  .carousel-move-show {*/
    /*    display: block;*/
    /*  }*/

    /*  .carousel-name-info-show {*/
    /*    display: block;*/
    /*  }*/
    /*}*/

    .carousel-move-show {
      display: none;
      min-width: 140px;
      height: 20px;
      line-height: 20px;
      overflow: hidden;
      box-sizing: border-box;
      text-align: center;

      .basic-name-item {
        position: absolute;
        left: 0;
        top: 0;
        /*transition: all  6s linear;*/
        height: 18px;
      }
    }

    .carousel-name-info {
      display: block;
      width: 100%;
      word-break: keep-all;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      box-sizing: border-box;
    }
  }
}

.carousel-text-warp-hover {
  &:hover {
    .carousel-name-info {
      display: none;
    }

    .carousel-move-show {
      display: block;
    }

    .carousel-name-info-show {
      display: block;
    }
  }
}

.carousel-text-warp-auto {
  .carousel {
    .carousel-name-info {
      display: none;
    }

    .carousel-move-show {
      display: block;
    }

    .carousel-name-info-show {
      display: block;
    }
  }
}
</style>
<style lang="scss">
#carousel-list-move-item-name {
  position: fixed;
  top: -50px;
  left: 0;
  z-index: 0;
  white-space: nowrap;
}
</style>
